<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link th:href="@{../../back/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{../../back/css/font-awesome.css?v=4.4.0}" rel="stylesheet">

    <!-- jqgrid-->
    <link th:href="@{../../back/css/plugins/jqgrid/ui.jqgrid.css?0820}" rel="stylesheet">

    <link th:href="@{../../back/css/animate.css}" rel="stylesheet">
    <link th:href="@{../../back/css/style.css?v=4.1.0}" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .ui-jqgrid .ui-jqgrid-hbox{
            padding-right:0;
        }
        .table.table-bordered{
            width: 100% !important;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">

                <div class="ibox-content">

                    <div class="ibox-content">
                        <form role="form" class="form-inline">
                            <div class="form-group">
                                会员ID：<input type="text" placeholder="请输入会员ID" id="queryMemberId" class="form-control">
                            </div>
                            <button class="btn btn-white" type="button" id="queryButton">查询</button>
                        </form>
                    </div>


                    <div class="jqGrid_wrapper">
                        <table id="table_list_1"></table>
                        <div id="pager_list_1"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<input type="hidden" id="activityId" />


<div id="cancelModel" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                    取消活动
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <form  id="cancelForm" role="form">
                            <div class="form-group">
                                <label>备注：</label>
                                <textarea id="cancelRemark" placeholder="请输入" class="form-control" ></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"   onclick="cancelActivity()" class="btn btn-primary">
                        取消活动
                    </button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="finishModel" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                    结束活动
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <form  id="finishForm" role="form">
                            <div class="form-group">
                                <label>备注：</label>
                                <textarea id="finishRemark" placeholder="请输入" class="form-control" ></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"   onclick="finishActivity()" class="btn btn-primary">
                        结束活动
                    </button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<div id="authConfirm" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                   活动详情
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <form  id="authConfirmForm" role="form">
                            <div class="form-group">
                                <label>活动名称：</label>
                                <input name="activityName" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>举办者：</label>
                                <input name="applicantName" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>参加积分：</label>
                                <input name="activityIntegral" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>活动时间：</label>
                                <input name="startTime" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>活动状态：</label>
                                <input name="activityStatus" class="form-control" />
                            </div>
                            <div class="form-group"><!--活动微文url地址-->
                                <label>活动微文url地址：</label>
                                <input name="activityUrl" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label>备注：</label>
                                <textarea name="remark" class="form-control" ></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>


<script th:inline="javascript">
      var onDetail = function(){};
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/

        function cancelActivity() {
            var remark = escape($("#cancelRemark").val());
            var activityId = escape($("#activityId").val());

            $.ajax({
                type: "post",
                url: "cancelActivity.action",
                data: {'id':activityId,'remark':remark}, //发送数据,
                dataType: "json",
                async: false,
                success: function (data) {
                    if(data!=null && data.success){
                        alert("取消成功!");
                        $("#table_list_1").trigger("reloadGrid");
                    }else {
                        alert(data.message);
                    }

                }
            });
            // });
        }

        function finishActivity() {
            var remark = escape($("#finishRemark").val());
            var activityId = escape($("#activityId").val());

            $.ajax({
                type: "post",
                url: "finishActivity.action",
                data: {'id':activityId,'remark':remark}, //发送数据,
                dataType: "json",
                async: false,
                success: function (data) {
                    if(data!=null && data.success){
                        alert("结束成功!");
                        jqmShow();
                        $("#table_list_1").trigger("reloadGrid");
                    }else {
                        alert(data.message);
                    }

                }
            });
            // });
        }

    </script>


    <!-- 全局js -->
    <script th:src="@{../../back/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{../../back/js/bootstrap.min.js?v=3.3.6}"></script>



    <!-- Peity -->
    <script th:src="@{../../back/js/plugins/peity/jquery.peity.min.js}"></script>
    <!-- jqGrid -->
    <script th:src="@{../../back/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820}"></script>
    <script th:src="@{../../back/js/plugins/jqgrid/jquery.jqGrid.min.js?0820}"></script>

    <!-- 自定义js -->
    <script  th:src="@{../../back/js/content.js?v=1.0.0}"></script>

    <!-- layerDate plugin javascript -->
    <script th:src="@{../../back/js/plugins/layer/laydate/laydate.js}"></script>


    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
    </script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            $.jgrid.defaults.styleUI = 'Bootstrap';
            // Configuration for jqGrid Example 1
            $("#table_list_1").jqGrid({
                url:ctxPath+'back/activity/queryPublishedActivityList.action',
                mtype:"POST",
                datatype: "json",
                sortname : 'createTime',
                sortorder : "desc",
                height: 550,
                autowidth: true,
                shrinkToFit: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                colNames: [ '活动名称',  '参加积分', '活动时间','活动状态', '微文','备注','操作'],
                colModel: [
                    {
                        name: 'activityName',
                        index: 'activityName',
                    },

                    {
                        name: 'activityIntegral',
                        index: 'activityIntegral'
                    },
                    {
                        name: 'startTime',
                        index: 'startTime',
                        sorttype: "date",
                        formatter: "date"
                    },
                    {
                        name: 'activityStatus',
                        index: 'activityStatus',
                        formatter: activityStatusFormatter

                    },
                    {
                        name: 'activityUrl',
                        index: 'activityUrl',
                        hidden: true
                    },
                    {
                        name: 'remark',
                        index: 'remark',
                        hidden: true
                    },
                    {
                        name: 'note',
                        index: 'note',
                        sortable: false,
                        align: "center",
                        sortable: false,
                        editable: false,
                        formatter: alarmFormatter
                    }
                ],
                pager: "#pager_list_1",
                viewrecords: true,
                jsonReader: {
                    root : "resultList", // 服务端保存数据的集合
                    id: "id", //相当于设置主键
                    total: "pageSize",　　 //总页数
                    page: "currentPage",　　//当前页
                    records: "totalRecord",//总记录数
                    repeatitems: false,
                    cell: "resultList"

                },
                caption: "已发布的活动",
                hidegrid: false
            });

            onDetail = function (activityId){
                $('#authConfirm').on('show.bs.modal', function () {
                    var rowData= $("#table_list_1").jqGrid('getRowData',activityId);
                    var form = $(this).find("form");
                    $(form).find("input,textarea").each(function(i, item){
                        var nm = $(item).attr("name");
                        if(rowData.hasOwnProperty(nm)){
                            $(item).val(rowData[nm]);
                        }
                    });
                })
                $('#authConfirm').modal('show');
            }


            window.onresize = function  _doResize() {
                var ss = pageSize();
                $("#table_list_1").jqGrid('setGridWidth', ss.WinW-10).jqGrid('setGridHeight', ss.WinH-200);
            }

            function pageSize() {
                var winW, winH;
                if(window.innerHeight) {// all except IE
                    winW = window.innerWidth;
                    winH = window.innerHeight;
                } else if (document.documentElement && document.documentElement.clientHeight) {// IE 6 Strict Mode
                    winW = document.documentElement.clientWidth;
                    winH = document.documentElement.clientHeight;
                } else if (document.body) { // other
                    winW = document.body.clientWidth;
                    winH = document.body.clientHeight;
                }  // for small pages with total size less then the viewport
                return {WinW:winW, WinH:winH};
            }

            $(function(){



                $("#queryButton").click(function(){
                    var memberId = escape($("#queryMemberId").val());

                    $("#table_list_1").jqGrid('setGridParam', {
                        url: ctxPath+'back/activity/queryPublishedActivityList.action',
                        postData:{'memberId':memberId}, //发送数据
                        page: 1
                    }).trigger("reloadGrid");

                });
            });


            //自定义格式列格式
            function alarmFormatter(cellvalue, options, rowObject){
                $('#activityId').val(rowObject.id);

                var imageHtml =" <input data-toggle='modal' data-target='#cancelModel' type='button' value='取消'  />&nbsp;&nbsp;" +
                    "<input data-toggle='modal' data-target='#finishModel' type='button' value='结束'  />&nbsp;&nbsp;" +
                    "<input data-toggle='modal'  onclick='onDetail(" + rowObject.id + ")' type='button' value='详情'  />&nbsp;&nbsp;";
                    "<input data-toggle='modal' data-target='#log' type='button' value='日志'  />";
                return imageHtml;//data-target='#detail'
            }

            //自定义格式列格式
            function activityStatusFormatter(cellvalue, options, rowObject){
                if(cellvalue=="UN_AUDIT"){
                    return "申请待审核";
                }else if(cellvalue=="APPLY_CANCEL"){
                    return "申请取消";
                }else if(cellvalue=="AUDIT_PASS"){
                    return "申请审核通过";
                }else if(cellvalue=="AUDIT_FAIL"){
                    return "申请审核不通过";
                }else if(cellvalue=="ACTIVITY_SIGN_UP"){
                    return "活动报名中";
                }else if(cellvalue=="ACTIVITY_IN_PROGRESS"){
                    return "活动进行中";
                }else if(cellvalue=="ACTIVITY_CANCEL"){
                    return "活动取消";
                }else if(cellvalue=="ACTIVITY_FINISHED"){
                    return "活动结束";
                }else if(cellvalue=="ACTIVITY_APPRECIATED"){
                    return "活动已打赏";
                }else{
                    return cellvalue;
                }
            }


            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width()+18;
                $('#table_list_1').setGridWidth(width);
                $('#table_list_2').setGridWidth(width);
            });
        });




    </script>


</body>

</html>
